<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试首页</title>
    <!-- 引入vue包 -->
    <script src="/js/vue.js"></script>
    <!-- 引用element样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引用element组件包 -->
    <script src="/js/index.js"></script>
    <!-- 引入axios包--基于vue开发 -->
    <script src="/js/axios.min.js"></script>
    <style>
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        .aaa {
            width: 160px;
            height: 150px;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <div style="width: 470px">
            <el-carousel height="280px" direction="vertical" :autoplay="false">
                <el-carousel-item v-for="item in tableData" :key="item.id">
                    <el-image
                            style="height: 250px;
                     width: 470px;"
                            :src="item.scover">
                    </el-image>
                    <el-col style="text-align: center;background: white">{{item.name}}</el-col>
                </el-carousel-item>
            </el-carousel>
        </div>
    </template>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],//表格格式
            }
        },
        created: function () {//页面初始化,需要执行的业务可以放入该方法
            //定义变量_this = this
            var _this = this;
            //axios向后端发送请求
            axios.post('/tScenic/queryAll' //请求url
            )//请求的参数 json格式
                .then(function (response) {//回调函数
                    //前端控制台打印  response  是json对象
                    console.log(response);
                    //JSON.stringify---将JSON对象转换为JSON字符串
                    console.log(JSON.stringify(response))
                    //response 获取后台数据时,一定加 data  response.data 相当于从响应的body中获取
                    if (response.data.code == 200) {
                        //这里面直接写this相当于axios对象，不是vue
                        //（错误的） this.tableData =  response.data.data.list;
                        _this.tableData = response.data.data;
                    }
                })
                //axios的异常处理
                .catch(function (error) {
                    console.log(error);
                })
        }
    })
</script>
</body>
</html>